<template>
    <div class="box">
        <van-search v-model="value" show-action @search="onSearch" @cancel="onCancel" placeholder="请输入搜索关键词">
            <template #left>
                <van-icon name="arrow-left" size="18" @click="$router.back()" />
            </template>
        </van-search>
        <div v-for="item in list" :key="item.id" @click="$router.push(`/detail/${item.id}`)">
            <van-card :price="`${item.price}.00`" :title="item.title" :thumb="item.image" />
        </div>
    </div>
</template>
<script>
import request from '@/utils/request'
export default {
    data() {
        return {
            value: '',
            list: []
        }
    },
    created() {
        this.query()
    },
    methods: {
        onSearch() {
            this.query()
        },
        onCancel() {
            this.query()
        },
        query() {
            request.get('/query', { params: { value: this.value } }).then(res => {
                this.list = res.data.list
            })
        },
    }
}
</script>